<script setup lang="ts">
import type { User } from '@/api/endpoints/system/user';

const props = defineProps<{
  tableData: User[];
}>();

const emit = defineEmits<{
  (e: 'resetPassword', user: User): void;
  (e: 'edit', user: User): void;
  (e: 'delete', user: User): void;
}>();

// 格式化日期
function formatDate(date: Date | string) {
  if (!date) {
    return '-';
  }
  return new Date(date).toLocaleDateString('zh-CN');
}

// 获取状态文本和样式
function getStatusInfo(status: number) {
  switch (status) {
    case 1:
      return { text: '正常', variant: 'default' as const };
    case 0:
      return { text: '禁用', variant: 'destructive' as const };
    default:
      return { text: '未知', variant: 'outline' as const };
  }
}

// 获取状态文本和样式
function getRoleInfo(role: string) {
  switch (role) {
    case 'admin':
      return { text: '管理员', variant: 'default' as const };
    case 'user':
      return { text: '用户', variant: 'secondary' as const };
    default:
      return { text: '未知', variant: 'outline' as const };
  }
}

// 获取性别文本
function getGenderText(gender?: number) {
  switch (gender) {
    case 1:
      return '男';
    case 2:
      return '女';
    default:
      return '-';
  }
}

function handleEdit(user: User) {
  emit('edit', user);
}

function handleDelete(user: User) {
  emit('delete', user);
}

function handleResetPassword(user: User) {
  emit('resetPassword', user);
}
</script>

<template>
  <div class="rounded-md border">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead class="w-[50px]">
            头像
          </TableHead>
          <TableHead class="w-[120px]">
            姓名
          </TableHead>
          <TableHead class="w-[200px]">
            邮箱
          </TableHead>
          <TableHead class="w-[120px]">
            职位
          </TableHead>
          <TableHead class="w-[100px]">
            电话
          </TableHead>
          <TableHead class="w-[80px]">
            状态
          </TableHead>
          <TableHead class="w-[80px]">
            性别
          </TableHead>
          <TableHead class="w-[80px]">
            角色
          </TableHead>
          <TableHead class="w-[100px]">
            登录次数
          </TableHead>
          <TableHead class="w-[150px]">
            最后登录
          </TableHead>
          <TableHead class="w-[120px]">
            创建时间
          </TableHead>
          <TableHead class="w-[100px]">
            操作
          </TableHead>
        </TableRow>
      </TableHeader>

      <TableBody>
        <TableRow v-for="user of props.tableData" :key="user.id">
          <TableCell>
            <Avatar class="h-8 w-8">
              <AvatarImage :src="user.avatar || ''" :alt="user.name" />
              <AvatarFallback>{{ user.name?.charAt(0) ?? '未知' }}</AvatarFallback>
            </Avatar>
          </TableCell>
          <TableCell class="font-medium">
            {{ user.name }}
          </TableCell>
          <TableCell>
            {{ user.email }}
          </TableCell>
          <TableCell>
            {{ user.position || '-' }}
          </TableCell>
          <TableCell>
            {{ user.phone || '-' }}
          </TableCell>
          <TableCell>
            <Badge :variant="getStatusInfo(user.status).variant">
              {{ getStatusInfo(user.status).text }}
            </Badge>
          </TableCell>
          <TableCell>
            <Badge :variant="getRoleInfo(user.role || '').variant">
              {{ getRoleInfo(user.role || '').text }}
            </Badge>
          </TableCell>
          <TableCell>
            {{ getGenderText(user.gender) }}
          </TableCell>
          <TableCell>
            {{ user.loginCount }}
          </TableCell>
          <TableCell>
            {{ formatDate(user.lastLoginAt || '') }}
          </TableCell>
          <TableCell>
            {{ formatDate(user.createdAt || '') }}
          </TableCell>
          <TableCell class="text-right flex gap-2">
            <Button variant="secondary" size="sm" @click="handleEdit(user)">
              编辑
            </Button>
            <Button variant="secondary" size="sm" @click="handleResetPassword(user)">
              重置密码
            </Button>
            <Button variant="secondary" size="sm" @click="handleDelete(user)">
              删除
            </Button>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>
